import { useRef } from "react";
import Toast from "./Toast";
import classNames from "classnames";

export default function index() {
	const toastRef = useRef<any>(null);

	const showToast = (type:string , position:string = "bottom") => {
		toastRef.current.show({
			type,
			title: "Title", // 标题 (可选)
			content: `This is ${type} ${position} message!`, // 内容
            position,
            duration:2000
		});
	};

	return (
		<div className={classNames('columnContainer' , 'aiCenter' , 'jcCenter')}>
            <button onClick={()=>showToast("error")}>Show Error Toast</button>
            <button onClick={()=>showToast("info")}>Show Info Toast</button>
			<button onClick={()=>showToast("success")}>Show Success Toast</button>
            <button onClick={()=>showToast("success","top")}>Show Top Success Toast</button>
			<Toast ref={toastRef} />
		</div>
	);
}
